/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState, useRef } from 'react';
import {
  FooterToolbar,
  ProCard,
  ProForm,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { SmileOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import LocalFile from './components/localFile';
import AliyunOssFile from './components/aliyunOssFile';
import MinioFile from './components/minioFile';
import EmailConfig from './components/emailConfig';
import { Button, Card, Menu } from 'antd';
import { getConfig } from '@/services/api/setting/config';
import styles from './style.less';
const { Item } = Menu;
export default function index() {
  // const dispatch = useDispatch;

  const intl = useIntl();
  const [tabPageKey, setTabPageKey] = useState('email');
  return (
    <PageContainer
      loading={{
        spinning: false,
        className: 'customClassName',
        tip: '拼命加载中...',
      }}
      onTabChange={(key) => setTabPageKey(key)}
      tabList={[
        {
          tab: intl.formatMessage({
            id: 'setting.config.tabs.basic',
            defaultMessage: '基础配置',
          }),
          key: 'basic',
        },
        {
          tab: intl.formatMessage({
            id: 'setting.config.tabs.email',
            defaultMessage: '邮箱配置',
          }),
          key: 'email',
        },
        {
          tab: intl.formatMessage({
            id: 'setting.config.tabs.file',
            defaultMessage: '文件配置',
          }),
          key: 'file',
        },
        {
          tab: intl.formatMessage({
            id: 'setting.config.tabs.other',
            defaultMessage: '其他配置',
          }),
          key: 'other',
        },
      ]}
    >
      <ProCard direction="column" ghost gutter={[0, 16]}>
        {tabPageKey === 'basic' ? <BasicConfig key="basic" /> : ''}
        {tabPageKey === 'email' ? <EmailConfig key="email" /> : ''}
        {tabPageKey === 'file' ? <FileConfig key="file" /> : ''}
      </ProCard>
    </PageContainer>
  );
}

// export default connect((state) => ({
//   baseConfig: state.config.baseConfig,
// }))(index);
{
  /* <Button
onClick={() => {
  props.dispatch({
    type: 'config/queryBaseConfig',
    param: 'aaa',
  });
}}
>
测试设置数据
</Button> */
}

// 通用配置
const BasicConfig = () => {
  const intl = useIntl();
  const [baseConfig, setBaseConfig] = useState({});
  const baseFormRef = useRef();
  const asyncGetConfigType = async () => {
    const param = { type: '0' };
    getConfig(param).then((res) => {
      const data = {};
      res.data.forEach((item) => {
        data[item.configKey] = item.configValue;
      });
      setBaseConfig(data);
      console.log(data);
      baseFormRef.current.setFieldsValue(data);
      // baseFormRef.current.setFieldValue({
      //   system_title: data[system_title],
      // });
    });
  };

  useEffect(() => {
    setTimeout(() => {
      asyncGetConfigType();
    });
  }, []);

  //获取初始值渲染表单
  return (
    <ProCard>
      <ProForm
        formRef={baseFormRef}
        submitter={{
          render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
        }}
        onFinish={async (values) => {
          // console.log(se);
          // setMateConfig({ AA: 'AAA' });
          baseFormRef.current.setFieldsValue({
            system_title: 'asd',
          });
          console.log(baseConfig);
        }}
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            required
            name="system_title"
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.system_title',
              defaultMessage: '系统标题',
            })}
            placeholder={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.placeholder.system_title',
              defaultMessage: '请输入系统标题',
            })}
          />
          <ProFormText
            width="md"
            name="system_version"
            required
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.system_version',
              defaultMessage: '系统版本',
            })}
            placeholder={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.placeholder.system_version',
              defaultMessage: '请输入系统版本',
            })}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            width="lg"
            name="system_copyright"
            required
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.system_copyright',
              defaultMessage: '版权信息',
            })}
            placeholder={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.placeholder.system_copyright',
              defaultMessage: '请输入版权信息',
            })}
          />
          <ProFormText
            width="md"
            name="company"
            required
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.system_copyright_address',
              defaultMessage: '版权地址',
            })}
            placeholder={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.placeholder.system_copyright_address',
              defaultMessage: '请输入版权地址',
            })}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText.Password
            width="md"
            name="init_password"
            required
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.init_password',
              defaultMessage: '初始化密码',
            })}
            placeholder={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.placeholder.init_password',
              defaultMessage: '请输入初始化密码',
            })}
          />
          <ProFormRadio.Group
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.enable_captcha',
              defaultMessage: '验证码开关',
            })}
            name="enable_captcha"
            required
            initialValue="开启"
            options={[
              {
                label: '开启',
                value: '0',
              },
              {
                label: '关闭',
                value: '1',
              },
            ]}
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormRadio.Group
            label={intl.formatMessage({
              id: 'setting.config.tabs.basic.form.system_file_type',
              defaultMessage: '对象文件存储',
            })}
            name="system_file_type"
            required
            initialValue="MINIO"
            options={['MINIO', '腾讯云', '阿里云']}
          />
        </ProForm.Group>
        <ProFormTextArea
          width="xl"
          label={intl.formatMessage({
            id: 'setting.config.tabs.basic.form.system_descrption',
            defaultMessage: '系统描述',
          })}
          name="system_descrption"
          placeholder={intl.formatMessage({
            id: 'setting.config.tabs.basic.form.placeholder.system_descrption',
            defaultMessage: '请输入系统描述',
          })}
        />
      </ProForm>
    </ProCard>
  );
};

// 文件配置
const FileConfig = () => {
  const intl = useIntl();
  const menuMap = {
    local: intl.formatMessage({
      id: 'setting.config.tabs.file.local',
      defaultMessage: '本地文件存储',
    }),
    alioss: intl.formatMessage({
      id: 'setting.config.tabs.file.aliyun',
      defaultMessage: '阿里对象存储',
    }),
    mino: intl.formatMessage({
      id: 'setting.config.tabs.file.minio',
      defaultMessage: 'Minio对象存储',
    }),
  };
  const getMenu = () => {
    return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
  };

  const [initConfig, setInitConfig] = useState({
    mode: 'inline',
    selectKey: 'alioss',
  });

  const renderChildren = () => {
    const { selectKey } = initConfig;
    switch (selectKey) {
      case 'local':
        return <LocalFile />;
      case 'alioss':
        return <AliyunOssFile />;
      case 'mino':
        return <MinioFile />;
      default:
        return null;
    }
  };

  return (
    <ProCard>
      <div className={styles.main}>
        <div className={styles.leftMenu}>
          <Menu
            mode={initConfig.mode}
            selectedKeys={[initConfig.selectKey]}
            onClick={({ key }) => {
              setInitConfig({
                ...initConfig,
                selectKey: key,
              });
            }}
          >
            {getMenu()}
          </Menu>
        </div>
        <div className={styles.right}>
          <div className={styles.title}>{menuMap[initConfig.selectKey]}</div>
          {renderChildren()}
        </div>
      </div>
    </ProCard>
  );
};
